<script setup>
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { PieChart } from 'echarts/charts';
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
} from 'echarts/components';
import VChart, { THEME_KEY } from 'vue-echarts';
import { ref, onMounted, provide } from 'vue';
import axios from 'axios';
import { ElMessage, ElMessageBox } from 'element-plus'
import { marked } from 'marked';


let provinceCode = ref(120); // 省份代码 默认选择天津省

use([
  CanvasRenderer,
  PieChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
]);

provide(THEME_KEY, 'light');

let option = ref({
  title: {
    text: '风险类型比例',
    left: 'center',
  },
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c} ({d}%)',
  },
  legend: {
    orient: 'vertical',
    left: 'left',
    data: ['人力风险', '物质风险', '自然风险', '金融风险', '社会风险'],
  },
  series: [
    {
      name: '风险类型',
      type: 'pie',
      radius: '55%',
      center: ['50%', '60%'],
      data: [], // 初始化为空，稍后将通过axios填充数据
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
        },
      },
    },
  ],
});

onMounted(() => {
  getGraphData();
});

import OpenAI from 'openai'
 
let client = new OpenAI({
     apiKey: "sk-mnTdSDfScxv2GEb5ScANA3X6vQvevxC659rryndU7azPmTMW", // 在这里将 MOONSHOT_API_KEY 替换为你从 Kimi 开放平台申请的 API Key
     baseURL: "https://api.moonshot.cn/v1",
     dangerouslyAllowBrowser: true
 })

 let result = ref("")
 let renderedMarkdown = ref('')
//  let data = reactive({})
//  watch(data, handleDataChange);

 async function main(data){
    let anaString = `现在分析的省份为${selectedText.value},接下来我将发送一个json格式的字符串，里面包含了这个省份的贫困人口返贫风险的信息，请你对这些信息进行分析，给出建议。其中，value为有此风险的人数，name为风险名称`+JSON.stringify(data);
    // console.log("anaString:"+anaString)
    let completion = await client.chat.completions.create({
         model: "moonshot-v1-8k",
         messages: [
             {"role": "system", "content": "你是 Kimi，由 Moonshot AI 提供的人工智能助手，你更擅长中文和英文的对话。你会为用户提供安全，有帮助，准确的回答。同时，你会拒绝一切涉及恐怖主义，种族歧视，黄色暴力等问题的回答。Moonshot AI 为专有名词，不可翻译成其他语言。下面的对话中你将根据不同地区的风险类型来分析这些地区面临的问题和可能的解决方案"},
             {"role": "user", "content": anaString}
         ],
         temperature: 0.3,
     })
      
     // 通过 API 我们获得了 Kimi 大模型给予我们的回复消息（role=assistant）
     console.log(completion.choices[0].message.content)
     result.value = completion.choices[0].message.content;
     renderedMarkdown.value = marked(result.value)
 }

 let citySelect = ref(null);
 let selectedText = ref('');

function getGraphData(event){
  let selectedOption = citySelect.value.options[citySelect.value.selectedIndex];
      selectedText.value = selectedOption.textContent; // 获取选项的文本内容
  axios
    .get(`http://localhost:8081/riskanalyse/risktypenum`, {
      params: { provinceCode: provinceCode.value },
    })
    .then((response) => {
      if(response.data.content == null){
        ElMessageBox.alert('该省没有返贫风险户', '信息', {
          // if you want to disable its autofocus
          // autofocus: false,
          confirmButtonText: 'OK',
        })
      }
      const data = response.data.content; // 假设数据在content中
      option.value.series[0].data = data; // 更新图表数据
      console.log(option.value.series[0].data)
      console.log(selectedText.value)
      main(data);
    })
    .catch((error) => {
      console.error('Error fetching risk type data:', error);
    });
}
</script>

<template>
  <el-scrollbar class="content-container">
  <v-chart class="chart" :option="option" autoresize />
  <!-- <v-chart :option="option" /> -->
  <div class="input-card">
    <h4>选择省份</h4>
    <select name="code-list" id="adcode-list" ref="citySelect" v-model="provinceCode" @change="getGraphData" style="height: 28px;margin-right: 10px;"><option value="110">北京市</option><option value="120">天津市</option><option selected="" value="130">河北省</option><option value="140">山西省</option><option value="150">内蒙古自治区</option><option value="210">辽宁省</option><option value="220">吉林省</option><option value="230">黑龙江省</option><option value="310">上海市</option><option value="320">江苏省</option><option value="330">浙江省</option><option value="340">安徽省</option><option value="350">福建省</option><option value="360">江西省</option><option value="370">山东省</option><option value="410">河南省</option><option value="420">湖北省</option><option value="430">湖南省</option><option value="440">广东省</option><option value="450">广西壮族自治区</option><option value="460">海南省</option><option value="500">重庆市</option><option value="510">四川省</option><option value="520">贵州省</option><option value="530">云南省</option><option value="540">西藏自治区</option><option value="610">陕西省</option><option value="620">甘肃省</option><option value="630">青海省</option><option value="640">宁夏回族自治区</option><option value="650">新疆维吾尔自治区</option></select>
    <!-- <h4>选择层级</h4>
    <select name="code-list" id="depth-list" style="height: 28px;margin-right: 10px;">
      <option value="0">0 - 显示省级</option>
      <option value="1">1 - 显示市级</option>
      <option selected="" value="2">2 - 显示区/县级</option>
    </select> -->
  </div>
  <div class="wrapper">
	  <p v-html="renderedMarkdown" class="markdown-content" ></p>
  </div>
  </el-scrollbar>
</template>

<style scoped>
.chart {
  width: 100%;
  height: 400px;
}
/* .content-container {
  width: 100%;
  height: 250px; 
  overflow: auto; 
} */
.content-container {
  width: 100%;
  height: 85vh; /* 固定高度 */
  overflow: auto; /* 当内容超出容器时，显示滚动条 */
}
.wrapper {
    margin-top: 10px;
}
</style>
